<?php
/* @var $this yii\web\View */

use yii\bootstrap\ActiveForm;

$this->title = 'VH Home';
?>

<style>
	.form-group > .form-control{
		height:50px;
	}
	
	.form-group {
	    margin-bottom: 20px;
	}
	
	.input-group{
		width:100%;
	}
	
	.c-btn{
		 cursor:auto;
		 font-size: 20px;
	}
	
	.c-error{
		border-color:red;
	}

    .msg-error{
        border:solid 3px red; text-align:center; padding:5px; font-size:17px; color:red;
    }

    .msg-valid{
        border:solid 3px #5bafdb; text-align:center; padding:5px; font-size:17px; color:#5bafdb;
    }

</style>

<script>
	var msg_wrong_password = "<?= Yii::t('app', 'Wrong password') ?>";
	var msg_alphabet = "<?= Yii::t('app', 'Login only alphabet') ?>";
    var msg_wrong_new_password = "<?= Yii::t('app', 'Wrong new password') ?>";
    var msg_change_pass_success = "<?= Yii::t('app', 'Change password success') ?>";

	function changePassword(){

        // Validate old password
        if (!validateOldPassword())
			return;

        // Validate new password
		var data = {
			password : $("#old_password").val()
		};
		
		$.ajax({
			type: "POST",
			url: app.homeUrl + "user/checkpassword",
			data: data,
			success: function(response){
                if(response.status == "success"){   // If new password is valid
                    hideError();

                    updateNewPassword();    // Update password
                } else {
                    $("#msg-error").html(msg_wrong_password);
                    $("#msg-error").show();
                    $("#old_password").addClass('c-error');
                }
            },
			dataType: "json"
		});
	}	

    function updateNewPassword(){
        if(validateNewPassword()){
            $.ajax({
                type : "POST",
                url: app.homeUrl + "user/updatepassword",
                data: {"new_password" : $("#new_password").val()},
                success : function(response){
                    if(response.status == "success"){
                        $("#msg-error").html(msg_change_pass_success);
                        $("#msg-error").show();
                        $("#msg-error").removeClass("msg-error");
                        $("#msg-error").addClass("msg-valid");
                        $(".c-error").removeClass('c-error');

                        clearAllPassword();
                    }else
                    {
                        $("#msg-error").html(msg_wrong_new_password);
                        $("#msg-error").addClass("msg-error");
                        $("#msg-error").show();
                        $("#new_password").addClass('c-error');
                        $("#confirm_password").addClass('c-error');
                    }
                }
            });
        }
    }

	function validateOldPassword(){
        var result = true;

        $("#msg-error").addClass("msg-error");
        $("#msg-error").removeClass("msg-valid");

        // Validate old password
		if($("#old_password").val() == "" || !app.validator.isValidPassword("old_password")){
            $("#msg-error").html(msg_alphabet);

            $("#old_password").addClass('c-error');
            $("#msg-error").show();

			result = false;
		}

		return result;
	}

    function validateNewPassword(){
        var old_password = $("#old_password").val();
        var new_password = $("#new_password").val();
        var confirm_password = $("#confirm_password").val();
        var result = true;

        if(new_password == "" || confirm_password == ""){
            result = false;
        }
        else if(new_password == old_password){
            result = false;
        }
        else if(new_password != confirm_password){
            result = false;
        }
        else if(!app.validator.isValidPassword("new_password")){
            result = false;
        }

        if(!result){
            $("#msg-error").html(msg_wrong_new_password);
            $("[group='new_password']").addClass("c-error");
            $("#msg-error").show();
        }

        return result;
    }

	function hideError(){
		$(".c-error").removeClass('c-error');
		$("#msg-error").hide();
	}

    function clearAllPassword(){
        $("[type='password']").val("");
    }

    $(function(){

    });
</script>

<div class="site-index">
    <div class="body-content">
         <?php $form = ActiveForm::begin([
        	'id'    => 'customer-form',
    	]);
         ?>
         <div class="form-group" style="height:165px; text-align:center;">
         	<h1><?= Yii::t("app", "Change password") ?></h1>
         </div>

        <div style="min-height: 60px;">
            <div style="display:none;" id="msg-error" class="msg-error">
            </div>
        </div>

		  <div class="form-group">
		    <div class="input-group">
		      <input type="password" class="form-control icon-lg lock" id="old_password" placeholder="<?= Yii::t("app","Old password")?>" style="height:50px;">
		    </div><!-- /input-group -->
		   </div> 
		  
		  <div class="form-group" style="margin-top:80px;">
		    <div class="input-group">
		      <input type="password" class="form-control icon-lg lock" id="new_password" placeholder="<?= Yii::t("app","New password")?>" style="height:50px;" group="new_password">
		    </div><!-- /input-group -->
		   </div>

        <div class="form-group">
            <div class="input-group">
                <input type="password" class="form-control icon-lg lock" id="confirm_password" placeholder="<?= Yii::t("app","Confirm password")?>" style="height:50px;" group="new_password">
            </div><!-- /input-group -->
        </div>

		  <div style="text-align: center; margin-top:30px;">
		  	<button type="button" class="btn btn-default" onclick="changePassword();"><?= Yii::t('app', "Signup") ?></button>
		  </div>

		<?php ActiveForm::end(); ?>
    </div>
</div>
